<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      svg{
         border:2px solid #ccc;
      }
    </style>
</head>
<body>
   <svg id="svg1">
   
   </svg>

    <script src="snap.svg.js"></script>
    <script>
       const svg = Snap('#svg1');
       svg.attr({
         width:400,
         height:400,
         viewBox:'0 0 250 250'
       });

       const on = 'M0 50 Q50 0 100 50Q50 100 0 50';
       const off = 'M0 50 Q50 50 100 50Q50 50 0 50';
       const eye = svg.path(on);
       eye.attr({
         fill:'none',
         stroke:'#000'
       });
       const eyeBox = eye.clone();

       const ball = svg.circle(50,50,25);
       ball.attr({
         clipPath:eyeBox
       });

      const leftEyeG = svg.g(eye,ball);
      const rightEyeG = leftEyeG.clone();
      rightEyeG.attr({
        transform:'translate(120)'
      });
      const rightEye = rightEyeG.select('path');

      const arr = [eye , eyeBox,rightEye];
      setInterval(()=>{
        arr.forEach((e,i)=>{
        e.animate({d:off},500,function(){
              this.animate({d:on},500);
          });
        })
      },2000)

    </script>
</body>
</html>